<script setup lang="ts">
import CpNacBar from '@/components/CpNavBar.vue'
</script>

<template>
  <CpNacBar title="我的成绩" />
  <div class="conBox">
    <div class="conItem">
      <div class="topBox">
        <h2>总计</h2>
        <p class="num">82</p>
        <p class="tip">总成绩由笔试和实操两部分组成</p>
      </div>
      <div class="bottomBox">
        <div class="leftBox">
          <span>笔试成绩（30%）</span>
          <p class="num">26</p>
        </div>
        <div class="rightBox">
          <span>实操成绩（70%）</span>
          <p class="num">60</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.conBox {
  width: 702px;
  margin: 0 auto;
  margin-top: 112px;
  .conItem {
    box-sizing: border-box;
    padding: 40px 40px 21px;
    width: 100%;
    height: 310px;
    background: url('../../assets/resultBg.png') no-repeat top left;
    background-size: 100% 100%;
    .num {
      font-family: DINEngschrift, DINEngschrift;
      height: 71px;
      font-size: 60px;
      color: #ffffff;
      line-height: 71px;
    }
    .num::after {
      content: '分';
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
      line-height: 33px;
      letter-spacing: 2px;
    }
    .topBox {
      h2 {
        font-weight: 500;
        font-size: 32px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 45px;
        margin-bottom: 8px;
      }
      .tip {
        font-weight: 500;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 33px;
      }
    }
    .bottomBox {
      height: 52px;
      line-height: 52px;
      margin-top: 49px;
      .rightBox,
      .leftBox {
        float: right;
        display: flex;
        height: 52px;
        line-height: 52px;
        span {
          width: 197px;
          font-weight: 500;
          font-size: 24px;
          color: rgba(255, 255, 255, 0.5);
          line-height: 52px;
        }
        .num {
          flex: 1;
          font-size: 44px;
          color: #ffffff;
          line-height: 52px;
        }
        .num::after {
          font-size: 24px;
          color: #ffffff;
          line-height: 33px;
        }
      }
      .leftBox {
        float: left;
      }
    }
  }
}
</style>
